<template>
  <div class="panel_h">
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      label-position="top"
    >
      <el-form-item label="是否绑定本地投票:" prop="is_tp" class="flex mb_0">
        <el-switch
          :width="50"
          class="ml_20"
          :disabled='status >= 1'
          v-model="form.is_tp"
          :active-value="1"
          :inactive-value="0"
          active-text="开"
          inactive-text="关"
          @change="changeTp"
        ></el-switch>
      </el-form-item>
      <div class="flex" v-if="form.is_tp == 1">
        <el-form-item label="" prop="tp_name" class="mr_30">
          <el-select v-model="form.tp_name" :disabled='status >= 1' placeholder="请选择平台">
            <el-option
              v-for="(item, index) in plantList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="tp_id">
          <el-input :disabled='status >= 1'
            v-model="form.tp_id"
            placeholder="请输入活动ID"
            maxlength="30"
            clearable
          ></el-input>
        </el-form-item>
      </div>
      <div class="flex alignend">
        <el-form-item label="开奖设置" prop="type">
          <el-select v-model="form.type" :disabled='status >= 1' placeholder="请选择开奖设置" @change="changeType">
            <el-option
              v-for="(item, index) in statusList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="form.type == 3" label=" " prop="open_draw.full_num" class="ml_30">
          <el-input
            v-model="form.open_draw.full_num"
            placeholder="请输入开奖人数"
            maxlength="10"
            clearable
            :rules="{ required: true, message: '开奖人数不能为空', trigger: 'blur' }"
          ></el-input>
        </el-form-item>
      </div>
      <el-form-item label="活动标题" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入活动标题"
          maxlength="30"
          show-word-limit
          clearable
        ></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="11">
          <el-form-item prop="draw_startime" label="抽奖开始时间">
            <el-date-picker
              type="datetime"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.draw_startime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2"> </el-col>
        <el-col :span="11">
          <el-form-item prop="draw_endtime" label="抽奖结束时间">
            <el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择抽奖结束时间"
              v-model="form.draw_endtime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-form-item label="活动公告" prop="notice">
        <el-input
          v-model="form.notice"
          placeholder="请输入活动公告"
          maxlength="50"
          show-word-limit
          clearable
        ></el-input>
      </el-form-item> -->
      <el-form-item label="活动介绍" prop="introduce">
        <!-- <Tinymce ref="tinymce" v-model="form.introduce" @msgBasic="msgBasic"></Tinymce> -->
        <Tinymce ref="tinymce" :msg="form.introduce" TinymceName='basic' @msgBasic="msgBasic"></Tinymce>
      </el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
    </el-form>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce/index.vue";
import { taskInfo, taskDataEdit,taskDataSave } from '@/api/active'
export default {
  data() {

    var validateEndTime = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择抽奖结束时间'));
      } else {
        var start = new Date(this.form.draw_startime).getTime()
        var end = new Date(value).getTime()
        if (end<=start) {
          // this.msgError(this.$t('结束时间必须大于开始时间'))
          callback(new Error('结束时间必须大于开始时间!'));
          // this.form.endDate = undefined
        }
        callback();
        // callback(new Error('两次输入密码不一致!'));
      }
    };

    var validateStartTime = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择抽奖开始时间'));
      } else {
        var start = new Date(value).getTime()
        var end = new Date(this.form.draw_endtime).getTime()
        if (start>=end) {
          // this.msgError(this.$t('结束时间必须大于开始时间'))
          callback(new Error('开始时间不能大于结束时间!'));
          // this.form.endDate = undefined
        }
        callback();
      }
    };

    return {
      t_id:'',
      info:{},
      status:0,
      statusList: [
        { name: "即抽开奖", id: 1 },
        { name: "定时开奖", id: 2 },
        { name: "满人开奖", id: 3 },
      ],
      plantList:[],
      form: {
        id:'',
        template_id:'',
        is_tp:0,
        tp_name:undefined,
        tp_id:undefined,
        type:'1',
        open_draw:{
          full_num:''
        },
        name:'',
        draw_startime:'',
        draw_endtime:'',
        notice:'',
        introduce:'',
      },
      rules: {
        name:[{ required: true, message: '请输入活动标题', trigger: 'blur' }],
        type:[{ required: true, message: '请选择开奖设置', trigger: 'change' }],
        draw_startime:[{ required: true, message: '请选择抽奖开始时间', trigger: 'change' },
          { validator: validateStartTime, trigger: 'change' }
        ],
        draw_endtime:[
          { required: true, message: '请选择抽奖结束时间', trigger: 'change' },
          { validator: validateEndTime, trigger: 'change' },
        ],
        introduce:[{ required: true, message: '请输入活动介绍', trigger: 'change' }],
        tp_name:[{ required: true, message: '请选择投票平台', trigger: 'change' }],
        tp_id:[{ required: true, message: '请选择投票活动id', trigger: 'blur' }],
      },
    };
  },
  props:{
    activeId:{
      default:''
    },
    ischange:{
      default:''
    }
  },
  components: {
    Tinymce,
  },
  created(){
    console.log('activeId:',this.activeId)
    this.getInfo()
    this.getDicts('/user/task/tpList').then(res=>{
      this.plantList = res.data
    })
  },
  watch:{
    ischange: {
      immediate: false,
      handler: function (val){
        console.log('改变摸吧了--',val)
        this.form.template_id = val
        this.save()
      }
    }
  },
  methods: {

    changeTp(val){
      if(!val){
        this.form.tp_name = undefined
        this.form.tp_id = undefined
      }
    },

    changeType(type){
      if(type!==3){
        this.form.open_draw.full_num = ''
      }
      // this.onchangeTab(this.form)
      this.$emit('changeType',this.form.type)
    },

    getInfo(){
      taskInfo({id:this.activeId}).then(res=>{
        let data = res.data
        this.info = data
        this.t_id = data.task.t_id
        this.status = data.task.status
        this.form.id = data.task.id
        this.form.is_tp = data.task.is_tp
        this.form.template_id = data.task.template.id
        this.form.name = data.task.name
        this.form.notice = data.task.notice
        this.form.draw_startime = data.task.draw_startime
        this.form.draw_endtime = data.task.draw_endtime
        this.form.introduce = data.task.introduce
        this.form.type = data.task.type
        this.form.tp_name = data.task.tp_name
        this.form.tp_id = data.task.tp_id||''
        // this.form.is_tp = data.task.tp_name?1:0
        if(data.task.open_draw){
          this.form.open_draw.full_num = data.task.open_draw.full_num
        }
        this.$emit('getTemplate', this.form.template_id)
      })
    },

    // 测试
    msgBasic(parmas) {
      this.form.introduce = parmas
      // console.log(parmas);
    },

    save(){
      console.log('val"')
      this.$refs.ruleForm.validate(valid=>{
        console.log('valid:', valid)
        if(!valid) return
         //已发布
        if(this.status == 1){
          taskDataSave(this.form).then(()=>{
            this.$message.success('编辑成功')
            this.getInfo()
          })
        }else{
          //未发布
          taskDataEdit(this.form).then(()=>{
            this.$message.success('编辑成功')
            this.getInfo()
          })
        }
      })
    }

  },
};
</script>
<style lang="scss" scoped>
.panel_h {
  height: calc(100vh - 239px);
  overflow-y: auto;
  padding-right: 12px;

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: #c1c1c1;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: 10px;
    background: #ededed;
  }
}
.line {
  height: 82px;
}
.el-form-item {
  margin-bottom: 16px;
}
::v-deep .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/*打开时文字位置设置*/
::v-deep .el-switch__label--right {
  z-index: 1;
  right: 24px;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--left {
  z-index: 1;
  left: 24px;
}
/*显示文字*/
::v-deep .el-switch__label.is-active {
  display: block;
}
::v-deep .el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 55px;
}
::v-deep label {
  font-weight: normal;
}
::v-deep .el-form-item__label {
  color: #000;
  font-size: 15px;
}
</style>